<template>
  <div style="width: 100%; height: 100%">
    <Echart :options="options" :id="id" height="100%" width="100%"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
    }
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
    id: {
      type: String,
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            y: 'center',
            right: '6%',
            data: newData.xData,
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: newData.seriesData,
              center: ['40%', '50%'],
              label: {
                normal: {
                  show: true,
                  formatter: '{d}%',
                  // formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                },
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped></style>
